<template>
  <view class="page-container">
    <!-- 通告 -->
    <Inform />
    <!-- 轮播图 -->
    <Slideshow />
    <!-- 顶部标题 -->
    <view class="header">
      <text class="header-text"
        >{{ personalInfo.number }}号 {{ personalInfo.name }}</text
      >
    </view>

    <!-- 数据展示区（当前排名、票数、距离上一名） -->
    <view class="info-wrapper container-box">
      <view class="info-item">
        <text class="info-value">{{ personalInfo.ranking }}</text>
        <text class="info-label">当前排名</text>
      </view>
      <view class="info-item">
        <text class="info-value">{{ personalInfo.votes }}</text>
        <text class="info-label">当前票数</text>
      </view>
      <view class="info-item">
        <text class="info-value">{{ personalInfo.gapToFirst }}</text>
        <text class="info-label">距前一名</text>
      </view>
    </view>

    <!-- 图片展示区 -->
    <view class="image-wrapper container-box">
      <image
        class="portrait"
        :src="personalInfo.imageUrl"
        mode="widthFix"
      ></image>
    </view>

    <!-- 详细信息区域 -->
    <view class="detail-container container-box">
      <!-- 基本信息 -->
      <view class="section">
        <view class="section-content">
          <text class="base-info">
            <text class="section-title">姓名: </text>
            {{ personalInfo.name }}</text
          >
          <text class="base-info">
            <text class="section-title">性别: </text>
            {{ personalInfo.gender }}</text
          >
          <text class="base-info">
            <text class="section-title">年龄: </text>
            {{ personalInfo.age }}</text
          >
          <view class="position-info">
            <text>{{ personalInfo.titles }}</text>
          </view>
        </view>
      </view>

      <!-- 师承信息 -->
      <view class="section">
        <view class="section-content">
          <text class="section-title">师承信息</text>
          <text class="section-text">{{ personalInfo.teacherInfo }}</text>
        </view>
      </view>

      <!-- 菜系特色及代表菜品 -->
      <view class="section">
        <view class="section-content">
          <text class="section-title">擅长菜系/代表菜</text>
          <text class="section-text">{{ personalInfo.cuisineFeatures }}</text>
          <text class="section-text">{{
            personalInfo.representativeDishes
          }}</text>
          <text class="section-text">{{ personalInfo.evaluation }}</text>
        </view>
      </view>

      <!-- 职业经历 -->
      <view class="section">
        <view class="section-content">
          <text class="section-title">职业经历</text>
          <view
            v-for="(item, index) in personalInfo.careerHistory"
            :key="index"
            class="career-item"
          >
            <text class="section-text">{{ item }}</text>
          </view>
        </view>
      </view>

      <!-- 荣誉经历 -->
      <view class="section">
        <view class="section-content">
          <text class="section-title">荣誉经历</text>
          <view
            v-for="(honor, hIndex) in personalInfo.honors"
            :key="hIndex"
            class="career-item"
          >
            <text class="section-text">{{ honor }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 操作按钮区域 -->
    <view class="action-area">
      <button class="action-btn" @click="showLeaveMessagePopup = true">
        给TA留言
      </button>
      <button class="action-btn" @click="share">分享拉票</button>
      <button class="action-btn" @click="backHome">返回首页</button>
    </view>

    <!-- 留言记录标题 -->
    <view class="record-title">留言记录</view>

    <!-- 留言记录列表 -->
    <view class="message-list">
      <view
        v-for="(item, index) in messageList"
        :key="index"
        class="message-item"
      >
        <view class="message-header">
          <image class="avatar" :src="item.avtor" mode="aspectFill"></image>
          <text class="nickname">{{ item.name }}</text>
        </view>
        <view class="message-content">
          <text>{{ item.content }}</text>
        </view>
        <view class="message-footer">
          <text class="time">{{
            new Date(item.startTime).toLocaleString()
          }}</text>
          <text v-if="!item.audit" class="not-approved"
            >[该留言尚未审核，仅自己可见]</text
          >
        </view>
      </view>
    </view>

    <!-- 留言弹出层 -->
    <view class="page">
      <view v-if="showLeaveMessagePopup" class="popup-mask">
        <view class="popup-container">
          <view class="popup-title">写留言</view>
          <textarea
            class="popup-textarea"
            placeholder="说点什么吧~"
            v-model="messageContent"
          ></textarea>
          <view class="popup-actions">
            <button class="cancel-btn" @click="closePopup">取消</button>
            <button class="submit-btn" @click="submitMessage">提交</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, defineProps } from "vue";
import { onLoad, onShareAppMessage } from "@dcloudio/uni-app";
import Inform from "../components/Inform/Inform.vue";
import Slideshow from "../components/Slideshow/Slideshow.vue";

onShareAppMessage((res) => {
  if (res.from === "button") {
    // 来自页面内转发按钮
    console.log(res.target);
  }
  return {
    title: "投票",
    path: "/pages/detail/detail",
  };
});
// 定义个人信息为响应式对象
const personalInfo = reactive({
  number: "614号",
  name: "张海生",
  ranking: 247,
  votes: 313,
  gapToFirst: 3,
  imageUrl:
    "https://d.yipingxuan.com/users/202012241637135fe4533949857.jpg?imageView2/2/w/800/h/800/interlace/1/q/100",
  gender: "男",
  age: 36,
  titles: ["中国烹饪大师", "国家级技师"],
  teacherInfo: "师承国际食神某某人",
  cuisineFeatures: "擅长菜系：精通重庆、四川各流派火锅底料熬制、调味...",
  representativeDishes:
    "《国宴员外菜》《卤菜》《涪陵菜》《融合意境菜》《蒸鲍翅》...经多年研究独创",
  evaluation: "《砂锅酥肉墙》《德鸿烩参羹饭》得到食客一致好评",
  careerHistory: [
    "2001年至2006年：重庆红岩火锅料炒料师",
    "2007年至2010年：重庆夫妻菜板坤铭辣菜火锅任行政总厨",
    "2011年至2013年：成郫雅雅餐饮管理集团，小院火锅任副厨长",
    "2014年至2016年：吉俊火锅任行政总厨",
    "2016年至2020年：任炽郝麻辣餐饮管理有限公司厨房顾问，同时先后自创古镇记忆火锅品牌，浩瀚火锅品牌",
  ],
  honors: [
    "2017年在重庆CFM第一届中国调味大师崛起赛中荣获特金奖",
    "2018年在北京CFM第二届中国调味大师崛起赛中荣获中国十大名厨、中花火锅第一味等荣誉",
  ],
});

// 获取id参数
// const id = ref(null);
onLoad((options) => {
  // id.value = options.id;
  const id = options.id;
  console.log("ididid", options.id);

  uni.request({
    url: `http://1.92.114.25:6624/users/getUserDetail?id=${id}`,
    method: "GET",
    data: {},
    success: (res) => {
      console.log(
        res.data.UserData,
        "---------------------------------------".res.data.UserData.mark
      );
      // activityMsgs.value = res.data.activityMsgs[0];
      personalInfo.number = res.data.UserData.mark;
      personalInfo.name = res.data.UserData.name;
      personalInfo.ranking = res.data.UserRank;
      personalInfo.votes = res.data.UserData.vote;
      personalInfo.gapToFirst = res.data.UserVote;
      personalInfo.gender = res.data.UserData.gender == true ? "男" : "女";
      personalInfo.age = res.data.UserData.age;
      personalInfo.imageUrl = res.data.UserData.avtor;

      personalInfo.titles = res.data.UserData.position;
    },
    fail: (err) => {
      console.log(err);
    },
  });

  uni.request({
    url: `http://1.92.114.25:6624/users/getComments?cid=${id}`,
    method: "GET",
    data: {},
    success: (res) => {
      messageList.value = res.data.data;
    },
  });
});

//按钮部分逻辑

const messageList = ref([
  // {
  //   avtor: 'https://thirdwx.qlogo.cn/mmopen/vi_32/NCxzLicvgyulMicibG7nEPwciaWibCgCh33N6NhcdAeVVbhSgeygcl91oToaxUVAN8icWwSHR8qaBzhvdJQQ7Q1hS9e10mZASS9ZQic2b2Ut7AbkWA/132',
  //   name: '安',
  //   content: 'ddd',
  //   startTime: '2024-12-09 15:27:30',
  //   audit: false
  // },
  // {
  //   avtor: 'https://thirdwx.qlogo.cn/mmopen/vi_32/NCxzLicvgyulMicibG7nEPwciaWibCgCh33N6NhcdAeVVbhSgeygcl91oToaxUVAN8icWwSHR8qaBzhvdJQQ7Q1hS9e10mZASS9ZQic2b2Ut7AbkWA/132',
  //   name: '安',
  //   content: 'ddd',
  //   startTime: '2024-12-09 15:27:30',
  //   audit: false
  // },
  // 可添加更多数据
]);

const leaveMessage = () => {
  // 给TA留言逻辑，例如跳转至留言页面或显示留言输入弹窗
  // uni.navigateTo({url: '/pages/leaveMessage/leaveMessage'})
};

//分享

const share = () => {
  // 分享拉票逻辑
  // 可以使用uni.share等API，或者生成分享二维码等
};

const backHome = () => {
  // 返回首页逻辑
  uni.switchTab({ url: "/pages/index/index" });
};

//留言逻辑

const showLeaveMessagePopup = ref(false);
const messageContent = ref("");

const closePopup = () => {
  showLeaveMessagePopup.value = false;
  messageContent.value = "";
};

const submitMessage = () => {
  if (!messageContent.value.trim()) {
    uni.showToast({ title: "请输入留言内容", icon: "none" });
    return;
  }

  // TODO: 将留言内容提交到服务器或进行相应处理
  uni.request({
    url: "http://1.92.114.25:6624/addComment",
    method: "POST",
    data: {
      content: messageContent.value,
      uid: "674fc4fca90c03d59b6e9412",
      cid: "674fc4fca90c03d59b6e9412",
    },
    success: (res) => {
      console.log(res.data, "留言");

      uni.showToast({ title: "留言成功", icon: "success" });
      closePopup();
    },
  });

  // 示例：直接提交后关闭并提示
  uni.showToast({ title: "提交成功", icon: "success" });
  closePopup();
};
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  background-color: #fef9e6;
  min-height: 100vh;
  padding: 20rpx;
}

/* 通用容器样式：黑色背景，金色边框，内边距 */
.container-box {
  background-color: #fef9e6;
  border: 6rpx solid #ed6e43;
  border-radius: 10rpx;
  padding: 20rpx;
  width: 85%;
  margin: 20rpx auto;
}

/* 顶部标题区域 */
.header {
  padding-top: 40rpx;
  padding-bottom: 40rpx;
  display: flex;
  justify-content: center;
  /* background-color: #2c2c2c; */
}
.header-text {
  color: #ed6e43;
  font-size: 45rpx;
  font-weight: bold;
  text-align: center;
}

/* 数据展示区 */
.info-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 20rpx;
}
.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.info-label {
  color: #000;
  font-size: 26rpx;
  margin-top: 10rpx;
}
.info-value {
  color: #ed6e43;
  font-size: 36rpx;
  font-weight: bold;
}

/* 图片展示区 */
.image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.portrait {
  width: 450rpx;
  border-radius: 10rpx;
}

/* 详细信息区域 */
.detail-container {
  display: flex;
  flex-direction: column;
  background-color: #fef9e6; /* 与container-box一样 */
  border: rpx solid #ed6e43;
  border-radius: 10rpx;
}

.section {
  border-bottom: 1rpx solid #f9c4a1;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
}
.section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.section-title {
  color: #ed6e43;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.section-text,
.base-info {
  color: #000;
  font-size: 24rpx;
  line-height: 1.4;
  margin-bottom: 10rpx;
}
.position-info {
  color: #ed6e43;
  font-size: 28rpx;
}
.career-item {
  margin-bottom: 10rpx;
}

.container {
  background-color: #1e1e1e;
  color: #fff;
  min-height: 100vh;
  padding: 20rpx;
}
/* 按钮区域 */
.action-area {
  display: flex;
  flex-direction: column;
}

.action-btn {
  background: #ed6e43;
  color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  text-align: center;
  border-radius: 10rpx;
  font-size: 32rpx;
  width: 92%;
  margin: 10rpx auto;
}

.record-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  margin-left: 10px;
  margin-top: 10px;
}

.message-list {
  /* background-color: #F89B7E; */
  border-radius: 10rpx;
  padding: 20rpx;
}

.message-item {
  /* background-color: #ED6E43; */
  border: 6rpx solid #ed6e43;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.message-header {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  background-color: #fff;
}

.nickname {
  font-size: 32rpx;
  font-weight: bold;
}

.message-content {
  margin-bottom: 10rpx;
  font-size: 28rpx;
}

.message-footer {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}

.time {
  margin-right: 20rpx;
}

.not-approved {
  color: #e74c3c;
}

/* 给他留言样式 */

.page {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-container {
  width: 80%;
  background: #fff;
  border-radius: 10rpx;
  padding: 40rpx 40rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
}

.popup-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #ed6e43;
  margin-bottom: 20rpx;
  text-align: center;
}

.popup-textarea {
  width: 100%;
  height: 200rpx;
  border: 1px solid #ed6e43;
  border-radius: 5rpx;
  padding: 15rpx;
  font-size: 18rpx;
  resize: none;
  background: #fef9e6;
  color: #333;
  margin-bottom: 30rpx;
}

.popup-actions {
  display: flex;
  justify-content: flex-end;
}

.cancel-btn,
.submit-btn {
  padding: 20rpx 40rpx;
  border-radius: 6rpx;
  font-size: 30rpx;
  border: none;
  cursor: pointer;
}

.cancel-btn {
  background: transparent;
  border: 1px solid #ed6e43;
  color: #ed6e43;
  margin-right: 20rpx;
}

.submit-btn {
  background: #ed6e43;
  color: #fff;
}
</style>
